﻿<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=device-width, user-scalable=no"/>
    <meta name="format-detection" content="telephone=no"/>
    <title></title>
    <script src="echarts.min.js"></script>
    <script src="jquery.min.js"></script>
    <style>

        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .left_right {
            width: 100%;
            overflow: hidden;
            font-size: 4.5vw;
            text-align: center;
            line-height: 12vw;
            background-color: #f8f8f8;
        }

        .left_right .left {
            float: left;
            width: 100%;
        }

        .left_content {
            overflow: hidden
        }

        .left_content .content_div {
            overflow: hidden;
            float: left;
            margin-bottom: 7%;
        }

        .left_content .content_div .content_div_title {
            text-align: center;
            font-size: 4vw;
            margin-top: 20px;
            height: 25px;
            color: #606060;
        }

        .left_content .content_div .content_div_pie {
            width: 25vw;
            height: 35vw;
        }


    </style>
    <script>
        window.onload = function () {
            var content = '[{\"UserName\":\"姜较上年就是东都江\",\"JHBFTerminalNum\":17.0,\"DQBFTerminalNum\":4.0},{\"UserName\":\"幺幺\",\"JHBFTerminalNum\":27.0,\"DQBFTerminalNum\":16.0},{\"UserName\":\"刚刚\",\"JHBFTerminalNum\":19.0,\"DQBFTerminalNum\":11.0},{\"UserName\":\"泡泡\",\"JHBFTerminalNum\":11.0,\"DQBFTerminalNum\":11.0},{\"UserName\":\"飞飞\",\"JHBFTerminalNum\":47.0,\"DQBFTerminalNum\":45.0}]';
            JavaCallJs(content);
        }


    </script>
</head>
<body>
<div id="leftId" class="left_content"></div>
</body>
<script type="text/javascript">
    function JavaCallJs(content){

        //设置左边图表数据
        $("#leftId").empty();
        var div = document.createElement("div");
        div.id = "newDivLeft";
        div.className = 'content_div';
        div.style.width = document.documentElement.clientWidth + 'px';

        //图表标题div
<!--        var div1 = document.createElement("div");-->
<!--        div1.id = "new1DivLeft";-->
<!--        div1.className = 'content_div_title';-->
<!--        div1.innerHTML = "当月产品销量";-->
<!--        div1.style.fontSize = "larger";-->
<!--        div1.style.color = "black";-->
<!--        div.appendChild(div1);-->

        //图表div
        var div2 = document.createElement("div");
        div2.id = "new2DivLeft";
        div2.className = 'content_div_pie';
        div2.style.width = document.documentElement.clientWidth  + 'px';
        div2.style.height = document.documentElement.clientHeight + 'px';
        div.appendChild(div2);

        //设置圆形图表
        setChart(content, div2);
        $("#leftId").append(div);
    }
    function setChart(item, div) {
        var myChart = echarts.init(div);
        var json = JSON.parse(item);
        var dataNames = [];
        var dataValues = [];
        var bgValues = [];
        for (var i = 0; i < json.length; i++) {
            dataNames.push(json[i].UserName);
            dataValues.push(json[i].DQBFTerminalNum);
            bgValues.push(json[i].JHBFTerminalNum);
        }
        var option = {
                grid: {left: '2%', right: '8%', bottom: '10%', containLabel: true},
                xAxis: {
                    type: 'value',
                    fontSize: 16,
                    splitLine: {
                        show: false
                    },
                    axisLine: {                  //---坐标轴 轴线
                        show: true,                  //---是否显示

                        //------------------- 箭头 -------------------------
                        symbol: ['none', 'arrow'],   //---是否显示轴线箭头
                        symbolSize: [8, 16],         //---箭头大小
                        symbolOffset: [0, 8],         //---箭头位置

                        //------------------- 线 -------------------------
                        lineStyle: {
                            color: '#FF3300',
                            width: 1,
                            type: 'solid',
                        },
                    },

                },
                yAxis: {
                    type: 'category',
                    axislabel: {
                        interval: 0,
                    },

                    data: dataNames.map(function (name) {
                        var strs = name.split(''); //字符串数组
                        var str = ''
                        for (var i = 0, s; s = strs[i++];) { //遍历字符串数组
                            str += s;
                            if (!(i % 4)) str += '\n'; //按需要求余
                        }
                        return str
                    }),

                    axisLine: {                  //---坐标轴 轴线
                        show: true,                  //---是否显示
                        //------------------- 线 -------------------------
                        lineStyle: {
                            color: '#1E90FF',
                            width: 1,
                            type: 'solid',
                        },
                    },

                },

                legend: {
                    data: ['达成', '目标'],
                    selectedMode: false,
                },
                series: [{
                    name: '达成',
                    data: dataValues,
                    type: 'bar',
                    color: '#1E90FF',
                    barWidth: 36,
                    itemStyle: {
                        normal: {
                            label: {
                                show: true, //开启显示

                                textStyle: { //数值样式
                                    color: '#fff',
                                    fontSize: 12,
                                },

                            }
                        }
                    },
                },
                    {
                        name: '目标',
                        type: 'bar',
                        barWidth: 36,
                        z: "-1",
                        barGap: '-100%',
                        color: '#FF3300',
                        data: bgValues,
                        itemStyle: {
                            normal: {
                                label: {
                                    show: true, //开启显示
                                    position: 'right', //在上方显示
                                    textStyle: { //数值样式
                                        color: '#FF3300',
                                        fontSize: 10
                                    },

                                }
                            }
                        },
                    },

                ]
            }
        ;

        myChart.setOption(option);
    }


</script>
</html>